<template>
  <div class="login-container" :style="{height: loginHeight + 'px'}">
    <!-- 粒子效果 -->
    <particles :particlesHeight="particlesHeight"></particles>
    <el-card class="box-card" shadow="always" :style="{marginLeft: marginLeft + 'px', marginTop: marginTop + 'px', position: 'absolute', top: '0px', background: 'rgba(45,58,75,0.8)'}">
      <el-form ref="loginForm" :model="loginForm" :rules="rules" class="login-form" auto-complete="on" label-position="left">
        <div class="title-container">
          <h3 class="title">Boom Login</h3>
        </div>
        <el-form-item prop="phone" class="bo-from">
          <span class="svg-container">
            <svg-icon icon-class="user" />
          </span>
          <el-input ref="phone" v-model="loginForm.phone" placeholder="手机号" name="phone" type="text" clearable/>
        </el-form-item>

        <el-form-item prop="password" class="bo-from">
          <span class="svg-container">
            <svg-icon icon-class="password" />
          </span>
          <el-input ref="password" v-model="loginForm.password" placeholder="密码" name="password" show-password clearable/>
        </el-form-item>

        <router-link to="/bubble" tag="li" style="list-style: none; float: right;position: relative; bottom: 110px;">
          <el-link type="primary" target="_blank" style="font-size: 15px; margin-bottom: 3px">忘记密码？</el-link>
        </router-link>

        <el-button class="bo-from bo-button" :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登 录</el-button>

        <router-link to="/Register" tag="li" style="list-style: none; position: relative; bottom: 80px;">
          <span class="register">还没有账号？</span>
          <el-link type="primary" target="_blank" style="font-size: 15px; margin-bottom: 3px">立即注册</el-link>
        </router-link>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { validPhone, validatePassword } from "@/utils/validate";
import { login } from "@/api/login";
import { getToken, setToken } from '@/utils/token';
import JSEncrypt from 'jsencrypt';
import particles from '../../components/particles/particles.vue';

export default {
  name: "Login",
  components: {
    particles
  },
  data() {
    return {
      marginLeft: window.innerWidth/2 - 350,
      marginTop: window.innerHeight/2 - 300,
      particlesHeight: window.innerHeight,
      loginForm: {
        phone: "",
        password: ""
      },
      rules: {
        phone: [{required: true, trigger: "blur", validator: validPhone}],
      },
      loading: false,
      loginHeight: window.innerHeight,
      remember: ''
    };
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.loginHeight = window.innerHeight;
        this.marginLeft = window.innerWidth/2 - 350;
        this.marginTop = window.innerHeight/2 - 300;
        this.particlesHeight = window.innerHeight;
      })();
    };
  },
  computed: {
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.remember = this.loginForm.password;
          login(this.passwordEncrypt()).then(res => {
              this.loginForm.password = this.remember;
              this.loading = false;
              if (res.status === 200) {
                let token = res.body.token;
                setToken(token);
                this.$router.push({ path: '/'});
              } else {
                if (res.code === 20200 || res.code === 20300) {
                  this.$message({ message: res.message, type: 'warning' });
                }else{
                  this.$message({ message: '系统异常，请稍后重试', type: 'error' });
                }
              }
          }).catch(() => {
            this.loginForm.password = this.remember;
            this.loading = false;
          });
        } else {
          return false;
        }
      });
    },
    passwordEncrypt() {
      let data = this.loginForm;
      let jse = new JSEncrypt();
      let publicKey = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCSNg1Zr8yAtvCCnVkk67CMtPmMBQ2OetaZn0BikuhBgo6wbCaIHR1FHb0gSO05RisnfWnbzzygP1VRUaBoNtfX1HfYL1FqVjFy3+GXEnve7eTZx/s7arr1gNHELNu6ZMLSKswrVMym69gE/dwWYrzKjcUNdoZHhlEjgtsrYRz+BQIDAQAB'
      jse.setPublicKey(publicKey);
      data.password = jse.encrypt(this.loginForm.password);
      return data;
    },
  }
};
</script>

<style lang="scss">
@import "css/login";
</style>
